<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :showAttrs="showAttrs"
                :multiAdd='true'
    >
    </table-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './deepfinishadd-add-or-update'
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'

export default {
  mixins: [basicMixins],
  data() {
    return {
      tableListData: [{
        orderDetailId: '',
        productId: '',
        productNumber: 0
      }],
      dataForm: {},
      putInTime: '',
      orderDetailList: [],
      productInfoList: [],
      searchAttrs: {
        deepOrderDetailId: {
          type: 'autoComplete',
          placeholder: '请输入订单编号',
          querySearchApiName: 'deepApi/deepOrderDetailList'
        },
        deepProductId: {
          type: 'autoComplete',
          placeholder: '请输入产品名称',
          querySearchApiName: 'deepApi/deepProductInfoList'
        },
        clientId: {
          label: '客户名称',
          clearable: true,
          type: 'autoComplete',
          placeholder: '请输入客户名称',
          querySearchApiName: 'clientApi/getClientList'
        },
        dateTimeRange: {
          type: 'date',
          dateType: 'daterange',
          clearable: true
        }
      },
      primaryKey: 'id',
      listApiName: 'deepApi/listDeepFinishAddList',
      deleteApiName: 'deepApi/deleteDeepFinishAdd',
      saveAuthName: 'deep:deepfinishadd:save',
      deleteAuthName: 'deep:deepfinishadd:delete',
      showAttrs: {
        orderNo: {
          label: '订单编号'
        },
        productNo: {
          label: '产品名称'
        },
        finishNumber: {
          label: '成品数量'
        },
        putInTime: {
          label: '入库时间',
          type: 'date'
        },
        lossNumber: {
          label: '损耗数量'
        },
        // processIssue:{
        //   label: '生产中出现问题'
        // },
        remark: {
          label: '备注'
        },
        status: {
          label: '状态',
          type: 'radio',
          items: [
            {value: 0, text: '禁用', tagType: 'danger'},
            {value: 1, text: '正常'}
          ]
        }
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },
  components: {
    AddOrUpdate,
    tableView
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.stepTableBox {
  margin-top: 20px;

  .thead-th {
    border-left: 1px solid #c7c7c9;
    border-bottom: 1px solid #c7c7c9;
    border-top: 1px solid #c7c7c9;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #121926;
  }

  .tbody-td {
    border-left: 1px solid #c7c7c9;
    border-bottom: 1px solid #c7c7c9;
    padding: 8px 28px 8px 10px;
    height: auto;
    position: relative;
  }

  .thead-nTh {
    border-right: 1px solid #c7c7c9;
  }

  .tbody-rTd {
    border-right: 1px solid #c7c7c9;
  }

  .td-input {
    display: inline-block;
    width: 20%;
    /*/deep/.ant-select-selection--single {*/
    /*  height: 30px;*/
    /*}*/
  }

  .td-input-select {
    display: inline-block;
    width: 33%;
    /*/deep/.ant-select-selection--single {*/
    /*  height: 30px;*/
    /*}*/
  }

  .td-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .tdInput {
    width: 78%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
